<template lang="">
  <div class="all">
    <ShowShops :shops="channels" :activitie="activitie"></ShowShops>
    <div class="div1">
      <span @click="clickshop" :class="className1">商品</span>
      <span @click="clickappr" :class="className2">评价</span>
    </div>
    <div class="contentL" v-if="flag" @click="bugShows = false">
      <ShowLeft :items="shopsInfos1"></ShowLeft>
      <ShowRight :itemRight="shopsInfos1" :creaseShow="creaseShow"></ShowRight>
    </div>
    <div class="bottom" v-if="flag">
      <div @click="showClick">
        <div class="bottom_1">
          <van-icon name="shopping-cart-o" class="icon" />
        </div>
        <div class="bottom_2">
          <div class="priceL">￥{{totalPrice}}.00</div>
          <div>配送费￥5</div>
        </div>
      </div>
      <div class="bottom_3">
        <div class="bottom_31" @click="clickGo">还差20起送</div>
      </div>
    </div>
    <div v-if="!flag">
      <appraise :score="score"></appraise>
      <type :type="type"></type>
      <message :message="message"></message>
    </div>
    <div class="bugShows" v-show="bugShows">
      <div class="bugShows1">
        <span>购物车</span>
        <span>清空</span>
      </div>
      <div v-for="(item,index) in this.totalsInfo" :key="index">
        <div class="bugShows2" v-if="item.num!=0">
          <div class="s1">{{item.name}}</div>
          <div class="s5" @click="clickadd(item,index)">+</div>
          <div class="s4">{{item.num}}</div>
          <div class="s3" @click="clickCrease(item,index)">-</div>
          <div class="s2">￥{{item.price}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import $ from "jquery";
  import ShowLeft from "@/components/ShowLeft.vue";
  import ShowShops from "@/components/ShowShops.vue";
  import ShowRight from "@/components/ShowRight.vue";
  import appraise from "@/components/appraise.vue";
  import type from "@/components/type.vue";
  import message from "@/components/message.vue"
  export default {
    name: "ShowShopsL",
    data() {
      return {
        activitie: [{ description: "", icon_name: "" }],
        channels: [],
        shopsInfos1: [],
        className1: "light",
        className2: "normal",
        linel: "appeal",
        liner: "appeal",
        flag: "ture",
        score: [],
        type: [],
        message: [],
        bugShows: false,
        creaseShow: false,//显示减商品
        totalPrice: 0,
      }
    },
    computed: {
      totalsInfo() {
        return this.$store.state.pri.totals;
      },
    },
    components: {
      ShowShops, ShowLeft, ShowRight, appraise, type, message
    },
    methods: {
      showClick() {//显示购物车
        this.bugShows = true;
        let a = this.$router.history.current.query.id
        const _this = this;
        $.ajax({
          url: "/api/find1Pros",
          type: "post",
          data: {
            uid: 1,
            shopsId: a,
          },
          success: function (data) {
            _this.$store.commit('changeTotals', data);
          }
        })
      },
      clickshop() {
        this.className1 = "light";
        this.className2 = "normal";
        this.flag = true;
      },
      clickappr() {
        this.className2 = "light";
        this.className1 = "normal";
        this.flag = false;
      },
      clickGo() {//点击去结算跳转
        let id = this.$router.history.current.query.id
        const _this = this;
        $.ajax({
          url: "/api/find1Pros",
          type: "post",
          data: {
            uid: 1,
            shopsId: id,
          },
          success: function (data) {
            _this.$store.commit('changeTotals', data);
          }
        })
        this.$router.push({ name: 'Order', query: { key: 0, id: id } })
      },
      clickadd(item, index) {//添加商品数量
        let s4 = document.querySelectorAll(".s4");
        $(s4[index]).innerHTML = item.num++;
        $.ajax({
          url: "/api/find1Pros",
          type: "post",
          data: {
            uid: 1,
            shopsId: item.sId1,
          },
          success: function (data) {
            console.log(data)
            data.forEach(function (v) {
              if (v.sId3 == item.sId3) {
                $.ajax({
                  url: "/api/updPro",
                  type: "post",
                  data: {
                    id: v._id,
                    num: v.num++,
                  },
                  success: function (data) {
                    console.log(data)
                  }
                })
              }
            })
          }
        })
      },
      clickCrease(item, index) {//减少商品数量
        let s4 = document.querySelectorAll(".s4");
        $(s4[index]).innerHTML = item.num--;
        $.ajax({
          url: "/api/find1Pros",
          type: "post",
          data: {
            uid: 1,
            shopsId: item.sId1,
          },
          success: function (data) {
            console.log(data)
            data.forEach(function (v) {
              if (v.sId3 == item.sId3) {
                $.ajax({
                  url: "/api/updPro",
                  type: "post",
                  data: {
                    id: v._id,
                    num: v.num--,
                  },
                  success: function (data) {
                    console.log(data)
                  }
                })
              }
            })
          }
        })
      }
    },
    created() {
      let id = this.$router.history.current.query.id;
      let latitude = this.$router.history.current.query.latitude;
      let longitude = this.$router.history.current.query.longitude;
      const url1 = this.axios.get("https://elm.cangdu.org/shopping/restaurant/" + id + "?latitude=" + latitude + "&longitude=" + longitude);
      const url2 = this.axios.get("https://elm.cangdu.org/shopping/v2/menu?restaurant_id=" + id)
      const url3 = this.axios.get("https://elm.cangdu.org/ugc/v2/restaurants/" + id + "/ratings/scores")
      const url4 = this.axios.get("https://elm.cangdu.org/ugc/v2/restaurants/" + id + "/ratings/tags")
      const url5 = this.axios.get("https://elm.cangdu.org/ugc/v2/restaurants/" + id + "/ratings?offset=0&limit=10")
      this.axios.all([url1, url2, url3, url4, url5]).then(this.axios.spread((res1, res2, res3, res4, res5) => {
        this.channels = res1.data;
        if (this.channels.activities.length != 0) {
          this.activitie = this.channels.activities;
        }
        this.shopsInfos1 = res2.data;
        this.score = res3.data;
        this.type = res4.data;
        this.message = res5.data;
      })).catch((err) => {
        console.log(err)
      })
      const _this = this;
      let a = this.$router.history.current.query.id;
      $.ajax({
        url: "/api/find1Pros",
        type: "post",
        data: {
          uid: 1,
          shopsId: a,
        },
        success: function (data) {
          _this.$store.commit('changeTotals', data);
          data.forEach(function (v) {
            _this.totalPrice = _this.totalPrice + (v.num - 0) * (v.price - 0);
          })
          if (this.totalPrice != 0) {
            $(".bottom_3").css("backgroundColor", "#4cd964");
            $(".bottom_31").html("去结算");
            $(".icon").css("backgroundColor", "#3190e8");
          }
        }
      })
      if ($(".priceL").html() == "￥0.00") {
        $(".bottom_3").css("backgroundColor", "#535356");
        $(".bottom_31").html("还差￥20起送");
        $(".icon").css("backgroundColor", "#333");
      }
    },
  }
</script>

<style lang="less" scoped>
  .div1 {
    display: flex;
    width: 100%;
    height: 40px;
    justify-content: space-around;
    line-height: 40px;
    position: relative;
    background-color: white;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }

  .bugShows {
    width: 100%;
    position: absolute;
    bottom: 50px;
    background-color: #fff;
  }

  .bugShows1 {
    width: 100%;
    height: 30px;
    background-color: #ccc;
    line-height: 30px;
    padding: 0 15px;
    box-sizing: border-box;
    color: #666;
    display: flex;
    justify-content: space-between;
  }

  .bugShows2 {
    overflow: hidden;
    padding: 0 10px;
  }

  .s1 {
    float: left;
    line-height: 50px;
  }

  .s2 {
    float: right;
    margin-right: 15px;
    color: red;
    margin-top: 15px;
  }

  .s3 {
    float: right;
    margin-right: 10px;
    border: 1px solid #3190e8;
    color: #3190e8;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    margin-top: 20px;
  }

  .s4 {
    float: right;
    margin-right: 10px;
    margin-top: 20px;
  }

  .s5 {
    float: right;
    margin-right: 15px;
    margin-top: 20px;
    background-color: #3190e8;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
  }

  .div1 span {
    text-align: center;
    display: inline-block;
  }

  .contentL {
    display: flex;
    /* justify-content: space-around; */
  }

  .light {
    color: rgb(49, 144, 232);
    border-bottom: 3px solid rgb(49, 144, 232);
  }

  .normal {
    color: gray;
  }

  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #333;
    display: flex;
    justify-content: space-between;
    z-index: 15;
  }

  .bottom_1 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    background-color: #666;
    left: 20px;
    top: -15px;
  }

  .icon {
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    background-color: #333;
    border-radius: 50%;
    display: block;
  }

  .bottom_2 {
    color: white;
    margin-left: 75px;
  }

  .bottom_2 div:nth-of-type(1) {
    font-size: 18px;
    font-weight: bold;
    line-height: 28px;
  }

  .bottom_2 div:nth-of-type(2) {
    font-size: 12px;
  }

  .bottom_3 {
    width: 110px;
    text-align: center;
    font-size: 15px;
    color: white;
    line-height: 50px;
    background-color: #535356;
  }
</style>